@charset "UTF-8";
/* -------------------------------------------------------------------------- */
/*                                   General                                  */
/* -------------------------------------------------------------------------- */
html {
  font-size: 10px;
  font-family: "latoregular";
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-1: #3d1051;
  --color-2: #ff5722;
  --color-3: #fff;
  --color-4: #000;
  --top-bar-height: 10rem;
  --font-size-h1: 4rem;
  --font-size-h2: 3rem;
  --font-size-h3: 2rem;
  --font-size-p: 1.5rem;
}

a {
  padding: 0;
  margin: 0;
  text-decoration: unset;
}

/*===============
  Nav
  ================*/
#nav-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  position: fixed;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  z-index: 99999;
}

#burger-button {
  position: fixed;
  right: 3rem;
  top: 3rem;
  z-index: 9999;
}

#main-nav {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-2);
  padding: 11rem 4rem 1rem;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 500ms ease-in-out;
  -o-transition: 500ms ease-in-out;
  transition: 500ms ease-in-out;
  z-index: 99;
}

#nav-trigger {
  display: none;
}

#nav-bar .burger-icon {
  display: block;
  width: 3rem;
  height: 2px;
  border-radius: 5px;
  background-color: var(--color-2);
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}
#nav-bar .burger-icon:after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  position: absolute;
  right: 0;
  border-radius: 5px;
  background-color: var(--color-2);
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}
#nav-bar .burger-icon:before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  position: absolute;
  right: 0;
  border-radius: 5px;
  background-color: var(--color-2);
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  top: -0.8rem;
}
#nav-bar .burger-icon:after {
  top: 0.8rem;
}

#nav-trigger:checked ~ #main-nav {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}
#nav-trigger:checked + #burger-button .burger-icon {
  width: 0rem;
  background-color: var(--color-1) !important;
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
}
#nav-trigger:checked + #burger-button .burger-icon:before {
  top: 0rem;
  background-color: var(--color-1) !important;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-trigger:checked + #burger-button .burger-icon:after {
  top: 0rem;
  background-color: var(--color-1) !important;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------------------- */
/*                                  Nav-Items                                 */
/* -------------------------------------------------------------------------- */
.main-menu {
  list-style: none !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.menu-item {
  padding: 1rem 0;
  width: 100%;
}

.menu-link {
  display: block;
  font-size: var(--font-size-h2);
  line-height: 1.38em;
  width: 100%;
  text-align: center;
}
.menu-link span {
  color: var(--color-1);
  font-family: "latoblack";
  text-transform: uppercase;
}
.menu-link:hover span {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/*                                    Logo                                    */
/* -------------------------------------------------------------------------- */
#logo {
  display: block;
  width: 10rem;
  height: var(--top-bar-height);
  margin-left: 2rem;
  background-color: transparent;
  z-index: 999;
}

.wrapper img {
  display: block;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------- */
/*                                  Headings                                  */
/* -------------------------------------------------------------------------- */
h1 {
  color: var(--color-2);
}

.headline {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  font-family: "latoblack";
  font-weight: 700;
  font-size: var(--font-size-h1);
  text-align: center;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* -------------------------------------------------------------------------- */
/*                                    Main                                    */
/* -------------------------------------------------------------------------- */
.main-grid {
  background-color: var(--color-1);
}

.main-grid-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  height: var(--top-bar-height);
}

.main-grid-middle {
  display: -ms-grid;
  display: grid;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
  -ms-grid-columns: 1fr 4rem 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5rem 4rem;
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 5rem !important;
}

.main-grid-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3/4;
}

/* -------------------------------------------------------------------------- */
/*                                   Buttons                                  */
/* -------------------------------------------------------------------------- */
.btn-wrapper {
  height: 100%;
  width: 100%;
}
.btn-wrapper .btn {
  height: 100%;
  width: 100%;
}
.btn-wrapper .btn .btn-img,
.btn-wrapper .btn .btn-img-hover {
  height: 100%;
  width: 100%;
}

.btn-text {
  color: var(--color-2);
  font-family: "latoblack_italic" !important;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.1em;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  padding: 0 5%;
}

.btn-wrapper .btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-shadow: 4px 3px 7px #000;
  box-shadow: 4px 3px 7px #000;
  border-radius: 5px;
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  border: 1px solid var(--color-1) !important;
}

.image-wrapper {
  min-height: 16rem;
}

.btn-wrapper .btn:hover {
  -webkit-box-shadow: 4px 3px 16px var(--color-2) !important;
  box-shadow: 4px 3px 16px var(--color-2) !important;
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  border-color: var(--color-2) !important;
}

.main-grid-middle .btn-wrapper .btn .btn-img {
  height: auto;
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/*                                    Audio                                   */
/* -------------------------------------------------------------------------- */
.audio-file {
  display: none;
}

/* -------------------------------------------------------------------------- */
/*                                 Animations                                 */
/* -------------------------------------------------------------------------- */
.main-grid-middle .btn-wrapper .btn .btn-img-2.animate {
  -webkit-animation: talking linear 1;
  animation: talking linear 1;
}
.main-grid-middle .image-wrapper.animate {
  -webkit-animation: talkingWrapper linear 1;
  animation: talkingWrapper linear 1;
}
.main-grid-middle .btn-wrapper .btn .btn-img-2 {
  margin-top: -0.25rem;
}

@-webkit-keyframes talkingWrapper {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transform-origin: unset;
    transform-origin: unset;
  }
  10% {
    -webkit-transform: translateY(-10%) rotate(0deg);
    transform: translateY(-10%) rotate(0deg);
    -webkit-transform-origin: unset;
    transform-origin: unset;
    -webkit-transform-origin: 65% 50%;
    transform-origin: 65% 50%;
  }
  20% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  30% {
    -webkit-transform: translateY(-10%) rotate(20deg);
    transform: translateY(-10%) rotate(20deg);
  }
  40% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  50% {
    -webkit-transform: translateY(-10%) rotate(20deg);
    transform: translateY(-10%) rotate(20deg);
  }
  60% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  70% {
    -webkit-transform: translateY(-10%) rotate(20deg);
    transform: translateY(-10%) rotate(20deg);
  }
  80% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  100% {
    -webkit-transform: translateY(0%) rotate(0deg);
    transform: translateY(0%) rotate(0deg);
    -webkit-transform-origin: unset;
    transform-origin: unset;
    -webkit-transform-origin: 70% 50%;
    transform-origin: 70% 50%;
  }
}
@keyframes talkingWrapper {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transform-origin: unset;
    transform-origin: unset;
  }
  10% {
    -webkit-transform: translateY(-10%) rotate(0deg);
    transform: translateY(-10%) rotate(0deg);
    -webkit-transform-origin: unset;
    transform-origin: unset;
    -webkit-transform-origin: 65% 50%;
    transform-origin: 65% 50%;
  }
  20% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  30% {
    -webkit-transform: translateY(-10%) rotate(20deg);
    transform: translateY(-10%) rotate(20deg);
  }
  40% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  50% {
    -webkit-transform: translateY(-10%) rotate(20deg);
    transform: translateY(-10%) rotate(20deg);
  }
  60% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  70% {
    -webkit-transform: translateY(-10%) rotate(20deg);
    transform: translateY(-10%) rotate(20deg);
  }
  80% {
    -webkit-transform: translateY(-20%) rotate(-20deg);
    transform: translateY(-20%) rotate(-20deg);
  }
  100% {
    -webkit-transform: translateY(0%) rotate(0deg);
    transform: translateY(0%) rotate(0deg);
    -webkit-transform-origin: unset;
    transform-origin: unset;
    -webkit-transform-origin: 70% 50%;
    transform-origin: 70% 50%;
  }
}
@-webkit-keyframes talking {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  10% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  15% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  20% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  25% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  30% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  35% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  40% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  45% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  50% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  55% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  60% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  65% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  70% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  75% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  80% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  85% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes talking {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  10% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  15% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  20% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  25% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  30% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  35% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  40% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  45% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  50% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  55% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  60% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  65% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  70% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  75% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  80% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  85% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
/* -------------------------------------------------------------------------- */
/*                                 Video/Drunk                                */
/* -------------------------------------------------------------------------- */
.drunk .btn-wrapper {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
}

.video {
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/*                                 Leberschuß                                 */
/* -------------------------------------------------------------------------- */
.main-grid-middle.leber {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 90svh;
}
.main-grid-middle.leber .slot-wrapper {
  display: -ms-grid;
  display: grid;
  height: 100%;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  transition: 500ms ease-in;
}
.main-grid-middle.leber .slot-wrapper .slot-option {
  grid-area: 1/1/2/2;
  display: block;
  padding-bottom: 5rem;
  opacity: 0;
}
.main-grid-middle.leber .slot-wrapper .slot-option.active {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
  transition: 500ms ease-in;
}
.main-grid-middle.leber .slot-wrapper .slot-option.active .svg-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 15rem;
}
.main-grid-middle.leber .slot-wrapper .slot-option.active svg {
  display: block;
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
}
.main-grid-middle.leber .slot-wrapper .slot-option.active .wso-slot-title {
  color: var(--color-2) !important;
  font-size: 3.8rem !important;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
  width: 100%;
  white-space: normal;
}
.main-grid-middle.leber .slot-wrapper .slot-option.active .wso-slot-description {
  max-width: 100%;
  color: var(--color-3) !important;
  font-size: var(--font-size-h3);
  white-space: normal;
  text-align: center;
}
.main-grid-middle.leber .slot-wrapper .slot-option.cloned-item {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  padding: 0;
}
.main-grid-middle.leber .slot-wrapper .slot-option.cloned-item .wso-slot-title,
.main-grid-middle.leber .slot-wrapper .slot-option.cloned-item .wso-slot-description {
  display: none !important;
}
.main-grid-middle.leber .slot-wrapper .slot-option.cloned-item .svg-wrapper {
  width: 100%;
  height: auto;
}
.main-grid-middle.leber .slot-wrapper .slot-option.cloned-item .svg-wrapper svg {
  width: 100%;
  height: auto;
}
.main-grid-middle.leber .slot-wrapper .start-slot,
.main-grid-middle.leber .slot-wrapper #reset-round {
  display: block;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: var(--font-size-h1);
  color: var(--color-2);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 4px solid var(--color-2);
  border-radius: 5rem;
  margin: 0;
  padding: 1rem;
  -webkit-transition: 1000ms ease-in-out;
  -o-transition: 1000ms ease-in-out;
  transition: 1000ms ease-in-out;
}
.main-grid-middle.leber .slot-wrapper .start-slot.clicked,
.main-grid-middle.leber .slot-wrapper #reset-round.clicked {
  background-color: var(--color-2);
  color: var(--color-3);
  -webkit-transition: 100ms linear;
  -o-transition: 100ms linear;
  transition: 100ms linear;
}
.main-grid-middle.leber .slot-wrapper #reset-round.hide {
  display: none;
}
.main-grid-middle.leber #rounds-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

/* -------------------------------------------------------------------------- */
/*                                 svg styles                                 */
/* -------------------------------------------------------------------------- */
#option-1 svg .st0 {
  fill: #d83331;
}
#option-1 svg .st1 {
  font-family: ComicSansMS-Bold, "Comic Sans MS";
  font-size: 381.18px;
  font-weight: 700;
}
#option-1 svg .st1,
#option-1 svg .st2 {
  fill: #fcdc30;
}
#option-1 svg .st3 {
  fill: #be1e2d;
}
#option-1 svg .st4 {
  fill: #981320;
}

#option-2 svg .st0 {
  fill: #030302;
}
#option-2 svg .st1 {
  fill: #bb7c52;
}
#option-2 svg .st2 {
  fill: #595b5d;
}
#option-2 svg .st3 {
  fill: #fbbeb5;
}
#option-2 svg .st4 {
  fill: #be1e2d;
}
#option-2 svg .st5 {
  fill: #981320;
}
#option-2 svg .st6 {
  fill: #ad653e;
}
#option-2 svg .st7,
#option-2 svg .st8 {
  fill: #fcdc30;
}
#option-2 svg .st9 {
  fill: #fab0a5;
}
#option-2 svg .st8 {
  font-family: ComicSansMS-Bold, "Comic Sans MS";
  font-size: 242.02px;
  font-weight: 700;
}
#option-2 svg .st10 {
  fill: #131313;
}
#option-2 svg .st11 {
  fill: #434343;
}

#option-3 svg .st0 {
  fill: #030302;
}
#option-3 svg .st1 {
  fill: #bb7c52;
}
#option-3 svg .st2 {
  fill: #595b5d;
}
#option-3 svg .st3 {
  fill: #fbbeb5;
}
#option-3 svg .st4 {
  fill: #ad653e;
}
#option-3 svg .st5 {
  fill: #fab0a5;
}
#option-3 svg .st6 {
  fill: #131313;
}
#option-3 svg .st7 {
  fill: #434343;
}

#option-4 svg .st0 {
  fill: #fca925;
}
#option-4 svg .st1 {
  fill: #f8f0e2;
}
#option-4 svg .st2 {
  fill: #ee9306;
}
#option-4 svg .st3 {
  fill: #fcfcfc;
}
#option-4 svg .st4 {
  fill: #c1272d;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 18px;
}

#option-5 svg .st0 {
  fill: #010101;
}
#option-5 svg .st1 {
  fill: #f23955;
}
#option-5 svg .st2 {
  fill: #d1a28d;
}
#option-5 svg .st3 {
  fill: #0b0b0a;
}
#option-5 svg .st4 {
  fill: #659696;
}
#option-5 svg .st5 {
  fill: #eeeedf;
}
#option-5 svg .st6 {
  fill: #98cacb;
}
#option-5 svg .st7 {
  fill: #92bbe3;
}
#option-5 svg .st8 {
  fill: #bf253c;
}
#option-5 svg .st9 {
  fill: #fefefe;
}
#option-5 svg .st10 {
  fill: #f8cab4;
}
#option-5 svg .st11 {
  fill: #33ca97;
}

#option-6 svg .st0 {
  fill: #fca925;
}
#option-6 svg .st1 {
  fill: #f8f0e2;
}
#option-6 svg .st2 {
  fill: #ee9306;
}
#option-6 svg .st3 {
  fill: #fcfcfc;
}
#option-6 svg .st4 {
  fill: #c1272d;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 18px;
}

#option-7 svg .st0 {
  fill: #fca925;
}
#option-7 svg .st1 {
  fill: #f8f0e2;
}
#option-7 svg .st2 {
  fill: #c1272d;
  stroke-width: 21px;
}
#option-7 svg .st2,
#option-7 svg .st3 {
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#option-7 svg .st4 {
  fill: #ee9306;
}
#option-7 svg .st3 {
  fill: #ccc;
  stroke-width: 20px;
}
#option-7 svg .st5 {
  fill: #fcfcfc;
}

#option-8 svg .st0 {
  fill: #b7931f;
}
#option-8 svg .st1 {
  fill: #fce2d5;
}
#option-8 svg .st2 {
  fill: #eebe27;
}
#option-8 svg .st3 {
  fill: #b8cbd3;
}
#option-8 svg .st4 {
  fill: #fefefe;
}
#option-8 svg .st5 {
  fill: #31130a;
}

#option-9 svg .st0 {
  fill: #c1272d;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#option-9 svg .st0,
#option-9 svg .st1 {
  stroke: #000;
  stroke-width: 21px;
}
#option-9 svg .st1 {
  fill: #ffa727;
  stroke-miterlimit: 10;
}

#option-10 svg .st0 {
  fill: #fca925;
}
#option-10 svg .st1 {
  fill: #f8f0e2;
}
#option-10 svg .st2 {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 21px;
}
#option-10 svg .st2,
#option-10 svg .st3 {
  fill: #c1272d;
  stroke: #000;
}
#option-10 svg .st4 {
  fill: #ee9306;
}
#option-10 svg .st5 {
  fill: #fcfcfc;
}
#option-10 svg .st3 {
  stroke-miterlimit: 10;
  stroke-width: 18px;
}

#option-11 svg .st0 {
  isolation: isolate;
}
#option-11 svg .st1 {
  fill: #fefefe;
}
#option-11 svg .st2 {
  fill: #050504;
}
#option-11 svg .st3 {
  fill: none;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 11px;
}
#option-11 svg .st4 {
  fill: #fbcb60;
}